<template>
  <div>
    <div id="topdiv">
      <div id="bb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>业主信息管理</el-breadcrumb-item>
          <el-breadcrumb-item>人员管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div id="vv">
        <el-button
          size="mini"
          type="primary"
          @click="loadme()"
          class="el-icon-refresh"
        ></el-button>
      </div>
    </div>
    <hr />
    <div id="we">
      <!-- <h2>UserInfo to java 2005</h2> -->
      <el-form :inline="true" :model="fromLise" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input
            placeholder="输入查询的姓名或身份证"
            v-model="fromLise.likeName"
            v-on:change="onLikeFind()"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属小区">
          <el-select
            :value="fromLise.comName"
            :label="fromLise.comName"
            @change="upcomm($event)"
          >
            <el-option
              v-for="item in comms"
              :key="item.id"
              :label="item.comName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onLikeFind" class="el-icon-thumb"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div id="div1">
      <div id="div2">
        <el-button
          size="mini"
          type="danger"
          slot="reference"
          @click="delAny"
          class="el-icon-delete"
          >批量删除</el-button
        >
        <el-button
          size="mini"
          type="primary"
          @click="addone()"
          class="el-icon-circle-plus-outline"
          >添加</el-button
        >
      </div>
      <div id="div3">
        <h5>
          共有数据:<a type="primary">{{ owners.length }}</a>
        </h5>
      </div>
    </div>

    <el-table
      :data="owners.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        style="border-right: 1px solid gray"
      >
      </el-table-column>
      <el-table-column align="center" label="ID" prop="id"></el-table-column>

      <el-table-column
        align="center"
        label="姓名"
        prop="uname"
      ></el-table-column>
      <el-table-column label="头像" align="center">
        <template slot-scope="scope">
          <el-popover
            align="left"
            placement="top-start"
            title=""
            trigger="hover"
          >
            <img
              :src="scope.row.img"
              alt=""
              style="width: 150px; height: 150px"
            />
            <img
              class="llimg"
              slot="reference"
              :src="scope.row.img"
              style="width: 40px; height: 40px; margin-top: 4px"
            />
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column align="center" label="所属小区" prop="community">
        <template slot-scope="scope">
          {{ scope.row.community.comName }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="所属房产" prop="house">
        <template slot-scope="scope">
          {{ scope.row.house.hname }}
        </template></el-table-column
      >

      <el-table-column align="center" label="电话" prop="tel"></el-table-column>
      <el-table-column
        align="center"
        label="身份证号"
        prop="idcard"
      ></el-table-column>
      <el-table-column
        align="center"
        label="生日"
        prop="birthday"
      ></el-table-column>
      <el-table-column
        align="center"
        label="职业"
        prop="prof"
      ></el-table-column>
      <!-- <el-table-column
        align="center"
        label="描述"
        prop="ownerDesc"
      ></el-table-column> -->
      <el-table-column align="center" label="性别" prop="sex"></el-table-column>
      <el-table-column align="center" label="角色" prop="roler">
        <template slot-scope="scope">
          {{ scope.row.roler.rolerName }}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="创建时间"
        prop="creaTime"
      ></el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scopeme" width="240px">
          <i class="el-icon-edit" @click="update1(scopeme.row)"></i>
          &nbsp; &nbsp;
          <i class="el-icon-delete" @click="delone(scopeme.row)"></i>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block" style="margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="owners.length"
      >
      </el-pagination>
    </div>
    <!-- 模态窗体 -->
    <div class="mod">
      <el-dialog
        title="修改信息"
        :visible.sync="dialogFormVisible"
        width="50%"
        close-on-click-modal="false"
      >
        <div id="modbody">
          <el-form :model="upowner" label-width="100px">
            <el-form-item label="" style="height: 120px">
              <template id="upimg">
                <el-popover
                  align="left"
                  placement="top-start"
                  title=""
                  trigger="hover"
                >
                  <img
                    :src="upowner.img"
                    alt=""
                    style="width: 150px; height: 150px"
                  />
                  <img
                    class="upimg"
                    slot="reference"
                    :src="upowner.img"
                    @click="uploadimg()"
                    style="width: 100px; height: 100px"
                  />
                </el-popover>
                <div id="upimgdiv" style="clear: both">
                  <el-upload
                    class="avatar-uploader"
                    action="http://localhost:8086/uploadimg"
                    accept="image/jpg, image/jpeg,image/png, image/tmp"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <el-button type="success" plain round size="mini"
                      >更改头像</el-button
                    >
                  </el-upload>
                </div>
              </template>
            </el-form-item>

            <div style="height: 150px; float: left; margin-left: -220px">
              <el-form-item label="ID" style="clear: both">
                <el-input
                  readonly="true"
                  v-model="upowner.id"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="姓名" style="clear: both">
                <el-input v-model="upowner.uname" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item
                style="
                  width: 100px;
                  height: 200px;
                  margin-left: -60px;
                  margin-top: -50px;
                "
              >
                <el-radio-group v-model="upowner.sex" size="medium">
                  <el-radio-button label="男"></el-radio-button>
                  <el-radio-button label="女"></el-radio-button>
                </el-radio-group>
              </el-form-item>
            </div>

            <el-form-item
              label="所属小区"
              style="clear: both; margin-left: 50px"
            >
              <el-select
                :value="upowner.community.comName"
                @change="upcomm2($event)"
              >
                <el-option
                  v-for="item in comms"
                  :key="item.id"
                  :label="item.comName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="所属房产">
              <el-select
                :value="upowner.house.hname"
                @change="uphouse2($event)"
              >
                <el-option
                  v-for="item in houses"
                  :key="item.id"
                  :label="item.hname"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="身份" style="margin-left: 50px">
              <el-input
                readonly="true"
                v-model="upowner.roler.rolerName"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item label="身份证号">
              <el-input v-model="upowner.idcard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" style="margin-left: 50px">
              <el-input
                suffix-icon="el-icon-date"
                v-model="upowner.tel"
              ></el-input>
            </el-form-item>

            <el-form-item label="生日">
              <el-date-picker
                v-model="upowner.birthday"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="职业" style="margin-left: 50px">
              <el-input v-model="upowner.prof"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="upowner.creaTime"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="描述" style="margin-left: 50px">
              <el-input
                style="width: 240%"
                type="textarea"
                v-model="upowner.ownerDesc"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入内容"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div id="footermod">
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="update2()"
              style="margin-left: 40px"
              >确 定</el-button
            >
          </span>
        </div>
      </el-dialog>
    </div>

    <!-- add模态窗体 -->
    <div class="mod">
      <el-dialog
        title="新增人员"
        :visible.sync="dialogFormVisible2"
        width="50%"
        close-on-click-modal="false"
      >
        <div id="modbody">
          <el-form :model="addowner" label-width="100px">
            <el-form-item style="clear: both; margin-left: 300px">
              <template id="upimg">
                <el-upload
                  style="float: left; margin-left: -20px"
                  class="avatar-uploader"
                  action="http://localhost:8086/uploadimg"
                  accept="image/jpg, image/jpeg,image/png, image/tmp"
                  :show-file-list="false"
                  :on-success="addImg"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="addowner.img"
                    :src="addowner.img"
                    class="avatar"
                    style="width: 120px; height: 120px"
                  />
                  <i
                    style="
                      width: 120px;
                      height: 120px;
                      border: 1px dashed #d9d9d9;
                      border-radius: 6px;
                      background-color: aliceblue;
                      font-size: 28px;
                      color: #8c939d;
                      line-height: 120px;
                      text-align: center;
                    "
                    v-else
                    class="el-icon-plus avatar-uploader-icon"
                  ></i>
                </el-upload>

                <el-form-item
                  style="
                    float: left;
                    width: 100px;
                    margin-left: 20px;
                    margin-top: 30px;
                  "
                >
                  <el-radio-group v-model="addowner.sex" size="medium">
                    <el-radio-button label="男"></el-radio-button>
                    <el-radio-button label="女"></el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </template>
            </el-form-item>
            <br />

            <el-form-item label="姓名">
              <el-input v-model="addowner.uname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份" style="">
              <el-select
                :value="addowner.roler.rolerName"
                @change="uproler($event)"
              >
                <el-option
                  v-for="item in rolers"
                  :key="item.id"
                  :label="item.rolerName"
                  :value="item.id"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属小区" style="">
              <el-select
                :value="addowner.community.comName"
                @change="upcomm3($event)"
              >
                <el-option
                  v-for="item in comms"
                  :key="item.id"
                  :label="item.comName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="所属房产">
              <el-select
                :value="addowner.house.hname"
                @change="uphouse3($event)"
              >
                <el-option
                  v-for="item in houses"
                  :key="item.id"
                  :label="item.hname"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="身份证号">
              <el-input v-model="addowner.idcard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" style="">
              <el-input
                suffix-icon="el-icon-date"
                v-model="addowner.tel"
              ></el-input>
            </el-form-item>

            <el-form-item label="生日">
              <el-date-picker
                v-model="addowner.birthday"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="职业" style="">
              <el-input v-model="addowner.prof"></el-input>
            </el-form-item>

            <el-form-item label="描述">
              <el-input
                style="width: 240%"
                type="textarea"
                v-model="addowner.ownerDesc"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入内容"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div id="footermod">
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button
              type="primary"
              @click="addone2()"
              style="margin-left: 40px"
              >新 增</el-button
            >
          </span>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogTableVisible: false,
      formLabelWidth: "120px",
      currentPage: 1, //初始页
      pagesize: 5, //每页的数据

      dialogFormVisible: false, //开关模态窗体的状态
      dialogFormVisible2: false,
      upowner: {
        //绑定模态窗体个属性的对象
        id: 1,
        creaTime: "2016-05-02",
        uname: "王小虎",
        community: {
          id: "0",
          comName: "小区名",
        },
        house: {
          id: "0",
          hname: "选择房产",
        },
        roler: {
          id: "0",
          rolerName: "身份",
        },
        tel: "13855889666",
        idcard: "120555555",
        rolerId: "1",
        comId: "1",

        houId: "1",
        rolerId: "1",
        img: null,
        sex: "男",
        prof: "学生",
        ownerDesc: "啊啊",
        birthday: "2016-05-02",
      },
      addowner: {
        //绑定模态窗体个属性的对象
        id: "",
        creaTime: new Date(),
        uname: "",
        community: {
          id: 0,
          comName: "选择小区",
        },
        house: {
          id: 0,
          hname: "选择房产",
        },
        roler: {
          id: 0,
          rolerName: "选择人员身份",
        },
        tel: "13834127785",
        idcard: "19625444499963256",
        rolerId: "",
        comId: "",
        houId: "",
        img: null,
        sex: "女",
        prof: "粉刷匠",
        ownerDesc: "我是一个粉刷匠",
        birthday: "",
      },
      owners: [
        {
          id: 1,
          creaTime: "2016-05-02",
          uname: "王小虎",
          tel: "13855889666",
          idcard: "120555555",
          rolerId: "1",
          comId: "1",
          community: {
            id: "0",
            comName: "选择小区 ",
          },
          house: {
            id: "0",
            hname: "选择房产",
          },
          roler: {
            id: "0",
            rolerName: "选择身份",
          },
          houId: "1",
          rolerId: "1",
          img: "aaa",
          sex: "男",
          prof: "学生",
          ownerDesc: "啊啊",
          birthday: "2016-05-02",
        },
      ],
      fromLise: {
        likeName: "",
        comId: 0,
        comName: "选择小区",
      },
      loadme: function () {
        location.reload();
      },
      houses: [],
      rolers: [{ id: "", rolerName: "", disabled: true }],
      comms: [
        {
          id: 1,
          comName: "状元壹号",
        },
        {
          id: 2,
          comName: "状元2s号",
        },
      ],
      search: "",
      multipleSelection: [],
    };
  },
  // 该模块内部创建成时执行created事件
  created: function () {
    this.findComm();

    this.$axios
      .get("/owner/owners")
      .then((res) => {
        if (res.data.code == 200) {
          this.owners.length = 0; //清空原有数组内容
          this.owners = res.data.data; //在空数组追加相应的数据
          console.log(res.data);
        } else {
          this.$message(res.data.msg);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },

  methods: {
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.upowner.img = res.data;
      this.$message({
        message: "头像上传成功!",
        type: "success",
      });
    },
    addImg(res, file) {
      console.log(res);
      this.addowner.img = res.data;
      this.$message({
        message: "图片上传成功!",
        type: "success",
      });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },

    // 小区拉框 改变
    upcomm(event) {
      for (let i = 0; i < this.comms.length; i++) {
        if (this.comms[i].id == event) {
          this.fromLise.comId = event;
          this.fromLise.comName = this.comms[i].comName;
        }
      }
      this.onLikeFind();
    },
    upcomm2(event) {
      this.findHouseByComId(event);
      this.upowner.house.hname = "选择房产";
      this.upowner.house.id = 0;
      for (let i = 0; i < this.comms.length; i++) {
        if (this.comms[i].id == event) {
          this.upowner.comId = event;
          this.upowner.community.id = event;
          this.upowner.community.comName = this.comms[i].comName;
        }
      }
    },
    upcomm3(event) {
      this.findHouseByComId(event);
      this.addowner.house.hname = "选择房产";
      this.addowner.house.id = 0;
      for (let i = 0; i < this.comms.length; i++) {
        if (this.comms[i].id == event) {
          this.addowner.community.id = event;
          this.addowner.community.comName = this.comms[i].comName;
        }
      }
    },

    uphouse2(event) {
      for (let i = 0; i < this.houses.length; i++) {
        if (this.houses[i].id == event) {
          this.upowner.house.id = event;
          this.upowner.houId = event;
          this.upowner.house.hname = this.houses[i].hname;
        }
      }
    },

    uphouse3(event) {
      for (let i = 0; i < this.houses.length; i++) {
        if (this.houses[i].id == event) {
          this.addowner.house.id = event;
          this.addowner.houId = event;
          this.addowner.house.hname = this.houses[i].hname;
        }
      }
    },
    uproler(event) {
      for (let i = 0; i < this.rolers.length; i++) {
        if (this.rolers[i].id == event) {
          this.addowner.roler.id = event;
          this.addowner.rolerId = event;
          this.addowner.roler.rolerName = this.rolers[i].rolerName;
        }
      }
    },

    findHouseByComId(comId) {
      this.houses.length = 0;
      this.$axios
        .get("/findHouseByComId?comId=" + comId)
        .then((res) => {
          if (res.data.statusCode == 200) {
            this.houses = res.data.data;
            console.log(res);
          } else {
            this.$message(res.data.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    findComm() {
      this.comms.length = 0;
      this.$axios
        .get("/comm/findComm")
        .then((res) => {
          if (res.data.code == 200) {
            this.comms = res.data.data;
            console.log(this.comms);
          } else {
            this.$message(res.data.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    onLikeFind: function () {
      this.$axios
        .post("/owner/findLike", {
          comId: this.fromLise.comId,
          likeName: this.fromLise.likeName,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.owners = res.data.data;
            console.log(this.owners);
          } else {
            this.$message(res.data.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    update1: function (r) {
      for (let i = 0; i < this.owners.length; i++) {
        if (this.owners[i].id == r.id) {
          this.upowner = this.owners[i];
        }
      }
      this.findHouseByComId(this.upowner.comId);
      // 显示模态窗体
      this.dialogFormVisible = true;
      console.log("this.upowner:::::::::");
      console.log(this.upowner);
    },

    update2: function () {
      if (this.upowner.house.id == null) {
        this.$message({
          showClose: true,
          message: "请选择所属房产",
          type: "warning",
        });
      } else {
        console.log("update2");
        console.log(this.upowner);
        // 像后端发出修改请求
        this.$axios
          .put("/owner/update", {
            id: this.upowner.id,
            creaTime: this.upowner.creaTime,
            uname: this.upowner.uname,
            tel: this.upowner.tel,
            idcard: this.upowner.idcard,
            comId: this.upowner.comId,
            houId: this.upowner.houId,
            rolerId: this.upowner.rolerId,
            img: this.upowner.img,
            sex: this.upowner.sex,
            prof: this.upowner.prof,
            ownerDesc: this.upowner.ownerDesc,
            birthday: this.upowner.birthday,
          })
          .then((res) => {
            // 修改成功
            if (res.data.code == 200) {
              // 修改成功后，遍历列表数组，用修改的对象数据更新原有数组中同id的对象数据
              for (var i = 0; i < this.owners.length; i++) {
                if (this.owners[i].id == this.upowner.id) {
                  this.owners[i].uname = this.upowner.uname;
                  this.owners[i].img = this.upowner.img;
                  this.owners[i].idcard = this.upowner.idcard;
                  this.owners[i].birthday = this.upowner.birthday;
                  this.owners[i].tel = this.upowner.tel;
                  this.owners[i].prof = this.upowner.prof;
                  this.owners[i].sex = this.upowner.sex;
                  this.owners[i].ownerDesc = this.upowner.ownerDesc;
                  this.owners[i].creaTime = this.upowner.creaTime;
                  this.owners[i].community.id = this.upowner.community.id;
                  this.owners[
                    i
                  ].community.comName = this.upowner.community.comName;
                  this.owners[i].roler.id = this.upowner.rolerId;
                  this.owners[i].rolerId = this.upowner.rolerId;
                  this.owners[i].roler.rolerName = this.upowner.roler.rolerName;
                  this.owners[i].house.id = this.upowner.house.id;
                  this.owners[i].house.hname = this.upowner.house.hname;
                }
              }
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "success",
              });
              // this.upowner = null;
            } else {
              alert(res.data.msg);
            }
          })
          .catch((error) => {
            alert("修改失败");
          });

        this.dialogFormVisible = false;
      }
    },

    delone: function (r) {
      //  alert("del  " + i + " " + r.id + "  ");
      if (confirm("确认要删除？" + r.id)) {
        this.$axios
          .put("/owner/delone", {
            id: r.id,
          })
          .then((res) => {
            if (res.data.code == 200) {
              for (let i = 0; i < this.owners.length; i++) {
                if (this.owners[i].id == r.id) {
                  this.owners.splice(i, 1);
                }
              }
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "success",
              });
            } else {
              alert(res.data.msg);
            }
          })
          .catch((error) => {
            alert("出现异常");
          });
      } else {
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },

    delAny() {
      let idStr = "";
      for (let i = 0; i < this.owners.length; i++) {
        for (let j = 0; j < this.multipleSelection.length; j++) {
          if (this.owners[i].id == this.multipleSelection[j].id) {
            idStr += this.multipleSelection[j].id + ",";
          }
        }
      }

      if (confirm("您确定删除吗?")) {
        this.$axios
          .get("/owner/delAny?idStr=" + idStr)
          .then((res) => {
            if (res.data.code == 200) {
              for (let i = 0; i < this.owners.length; i++) {
                for (let j = 0; j < this.multipleSelection.length; j++) {
                  if (this.owners[i].id == this.multipleSelection[j].id) {
                    this.owners.splice(i, 1);
                  }
                }
              }
              this.$message({
                message: "删除成功！",
                type: "success",
              });
            } else {
              this.$message({
                message: "删除失败！",
                type: "error",
              });
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    findRoler() {
      this.$axios
        .get("/roler/findAll")
        .then((res) => {
          if (res.data.code == 200) {
            this.rolers = res.data.data;
            for (let i = 0; i < this.rolers.length; i++) {
              if (this.rolers[i].id == 1) {
                this.rolers[i].disabled = true;
              } else {
                this.rolers[i].disabled = false;
              }
            }

            console.log(this.comms);
          } else {
            this.$message(res.data.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    addone() {
      //查询身份
      this.findRoler();
      // 显示模态窗体
      this.dialogFormVisible2 = true;
    },
    addone2() {
      if (this.addowner.community.id === 0) {
        this.$message({
          showClose: true,
          type: "warning",
          message: "请选择所属小区",
          center: true,
        });
      } else if (this.addowner.house.id === 0) {
        this.$message({
          showClose: true,
          message: "请选择所属房产",
          type: "warning",
          center: true,
        });
      } else if (this.addowner.roler.id === 0) {
        this.$message({
          showClose: true,
          message: "请选择所属身份",
          type: "warning",
          center: true,
        });
      } else if (this.addowner.uname === "" || this.addowner.uname == null) {
        this.$message({
          showClose: true,
          message: "请输入姓名",
          type: "warning",
          center: true,
        });
      } else {
        // 像后端发出修改请求
        this.$axios
          .post("/owner/add", {
            uname: this.addowner.uname,
            tel: this.addowner.tel,
            idcard: this.addowner.idcard,
            comId: this.addowner.community.id,
            houId: this.addowner.house.id,
            rolerId: this.addowner.roler.id,
            img: this.addowner.img,
            sex: this.addowner.sex,
            prof: this.addowner.prof,
            ownerDesc: this.addowner.ownerDesc,
            birthday: this.addowner.birthday,
          })
          .then((res) => {
            // 增加成功
            if (res.data.code == 200) {
              
              console.log(res.data);
              this.owners.push(res.data.data);
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "success",
              });

              this.dialogFormVisible2 = false;
              //清空某个对象的值
              Object.keys(this.addowner).forEach(
                (key) => (this.addowner[key] = "")
              );
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "warning",
              });
            }
          })
          .catch((error) => {
            alert("新增失败");
          });
        this.dialogFormVisible = false;
      }
    },
  },
};
</script>
<style>
#upimgdiv .el-upload,
#upimgdiv .el-button,
#upimgdiv {
  height: 20px;
  width: 80px;
  margin: 4px 4px;
  line-height: 0px;
}
#div1 {
  height: 50px;
  line-height: 50px;
}
#topdiv {
  height: 50px;
}
#div2 {
  float: left;
}
#div3 {
  float: right;
  line-height: 20px;
}
#p1 {
  font-size: 15px;
  float: left;
}

#we {
  height: 50px;
  line-height: 30px;
  font-size: 18px;
}
#vv {
  line-height: 30px;
  float: right;
}
#divtable .el-table__header th,
#divtable .el-table__header tr {
  background-color: beige;
}
#bb {
  margin-top: 10px;
  float: left;
}
#divtable {
  line-height: 40px;
}
#sou {
  height: 34px !important;
}
.mod .el-form-item {
  float: left;
  margin-left: 20px;
  width: 400px;
}
.upimg {
  float: left;
}
.mod .el-date-picker,
.mod .el-input {
  float: left;
}
.mod .el-select {
  float: left;
  margin-left: 0;
}
.mod .el-input,
.mod .el-select {
  width: 300px;
}
.mod .el-dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  height: 68%;
  overflow: hidden;
}
.mod .el-dialog__body {
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 100px;
  bottom: 0;
  right: 0;
  padding: 0;
  z-index: 1;
  overflow: hidden;
  overflow-y: auto;
}
.mod .el-dialog__title {
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 34px;
  bottom: 0;
  right: 0;
  padding: 0;
  z-index: 1;
  overflow: hidden;
  overflow-y: auto;
}
.mod #footermod {
  width: 100%;
  height: 80px;
  position: absolute;
  clear: both;
  bottom: 60px;
}
.mod #footermod .el-button {
  width: 150px;
  margin-right: 30px;
}

.el-table__header th,
.el-table__header tr {
  padding: 0px 0px;
  color: black;
  line-height: 76px;
  font-size: 18px;
}
.addmod .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  background-color: aliceblue;
  width: 120px;
  height: 120px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.addmod .avatar-uploader .el-upload:hover {
  border-color: #409eff;
  width: 120px;
  height: 120px;
}
.addmod .avatar-uploader-icon {
  width: 120px;
  height: 120px;
  font-size: 28px;
  color: #8c939d;
  line-height: 120px;
  text-align: center;
}
.addmod .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
